<template>
<!-- 组织管理 -->
  <div>
    <!-- 卡片区域 -->
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>校区管理</el-breadcrumb-item>
            <el-breadcrumb-item>组织管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 筛选导航 -->
        <el-row>
            <el-col :span="18">
                <div class="grid-content bg-purple col-demonstration1">
                    <!-- 创建时间 -->
                    <div class="block">
                        <span class="demonstration">创建时间:</span>
                        <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="block">
                        <span class="demonstration">--</span>
                        <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <!-- 节点名称 -->
                    <div class="col-select">
                        <span>节点名称:</span>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <!-- 搜索框 -->
                <div class="grid-content bg-purple-light col-input" >
                    <el-input v-model="input" @change='changeInput' placeholder="请输入组织名称搜索" suffix-icon="el-icon-search"></el-input>
                </div>
            </el-col>
        </el-row>
        <!-- tab表格 -->
        <el-table
            stripe
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
                prop="City"
                label="城市"
                width="180">
            </el-table-column>
            <el-table-column
                prop="District"
                label="城区"
                width="180">
            </el-table-column>
            <el-table-column
                prop="info"
                label="是否需要管理"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器组件导入 -->
        <pageBox @pagintionlist='pagintionlist2' :pagination='paginations'></pageBox>
    </el-card>
    <!-- 编辑对话框 -->
    <!-- @childFn='parentFn'(父亲接收子传递过来的值) :hiddens='dialogVisible'(子向父传递参数) -->

    <dialogIndex @childFn='parentFn' :hiddens='dialogVisible'>
        <el-form :rules="formrules" ref="formrules" :model="infoFrom" label-width="120px">
            <el-form-item label="组织名称：">
                河南省教育厅
            </el-form-item>
            <el-form-item label="节点名称：">
                省教育厅
            </el-form-item>
            <el-form-item label="地区：">
                <el-cascader
                :options="options3"
                v-model="selectedOptions3"
                @change="changeOptions"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="资质：" class="el-uploads">
               <upload></upload>
            </el-form-item>
        </el-form>
    </dialogIndex>
  </div>
</template>

<script>
import dialogIndex from '@/components/commons/Dialog/index.vue'
import pageBox from '@/components/commons/Pagination/index.vue'
import {getUserList} from '@/api/user.js'
import Upload from '@/components/commons/Upload/index.vue'

export default {
  name: 'organizationManagement',

  components:{
      dialogIndex,
      pageBox,
      Upload
  },
  data(){
      return{
          // 对话框的内容
            dialogVisible:{},
            infoFrom:{
                nodeType:'',
                radio:'1'
            },
            // 管理项
            tags: [
                { name: '标签一', },
                { name: '标签二', },
                { name: '标签三', },
                { name: '标签四', },
                { name: '标签五', }
            ],
            // 验证规则
            formrules:{
                nodeType: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    {min:2,max:6,message:'6个字以内',trigger:'blur'}
                ]
            },
            //   账户列表
          tableData:[],
          // 分页
          paginations:{},
        //   选择器类别
          options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        // 选择器当前选择的val
        value: '选项1',
        // 当前选中的日期
        value1: '',
        // 搜索框的val值
        input: '',
        // 三级联动
        options3: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        // 选中的三级联动val
        selectedOptions3: ['zujian', 'data', 'tag'],
      }
  },
  methods:{

    //   接收子传递过来的页码对象
      pagintionlist2(obj){
        //   调用渲染表格
          this.table(obj);
      },

    //   获取表格
      table(val){
        //   调用账户列表
        getUserList({
            queryText:'',
            memberTypeID:'',
            pageIndex:val.current-1,
            pageSize:val.num
        }).then(res=>{
            console.log(res)
            this.tableData=res.data
            // 给子组件传递参数
            this.paginations={
              pageIndex:val.current,//当前显示第几页数
              pageSize:val.num,//每页显示几条数据
              total:res.rowsCount,//总共多少条数据
            }
        })
      },

    //   点击编辑按钮
      handleEdit(row) {
        console.log(row);
        this.dialogVisible={
            // 显示、隐藏对话框
            visible:true,
            title:'编辑'
        }
      },

      // 关闭并重置表单
        refsClose(){
            this.$refs.formrules.resetFields()
        },

        // 接收子组件传递的值
        parentFn(val){
            if(val=='sub'){
                this.$refs.formrules.validate((valid) => {
                    if(!valid) return;
                    this.$message.success('保存');
                    this.refsClose();
                    this.dialogVisible.okForm=false
                })
                // 重置表单
            }else if(val=='hidden'){
                this.refsClose()
            }
        },
        // 输入框发生改变触发
        changeInput(obj){
            console.log(this.input)
        },
        // 级联选择发生改变触发
        changeOptions(){
            console.log(this.selectedOptions3)
        },

  },
  created(){
      this.table({
          num:10,
          current:0,
        })
  }
}
</script>

<style lang="less" scoped>
.col-demonstration1{
    display: flex;
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 130px;
    }
    .col-select{
        margin-left: 20px;
        span{
            margin-right: 10px;
        }
    }
    .demonstration{
        margin: 0 10px;
    }
}
.col-input{
    display: flex;
    justify-content: flex-end;
    .el-input{
        width: 80%;
    }
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0;
}
.el-scrollbar__view .el-cascader-menu__list li{
    padding: 10px;
}

// 上传文件
.el-uploads{
    margin-top: 10px;
}
</style>
